<template>
<!--pages/home/home.wxml-->
<view class="box">
<!-- 登录 -->
  <view class="logins">
	  <view v-if="!users" class="logins_img">
		  <image :src="userinfo.avatarurl" class="logins_img_user"></image>
		  <text class="logins_img_title">{{userinfo.nickname}}</text>
	  </view>
	  <view v-else class="logins_img">
	  		  <image src="../../static/user.png" class="logins_img_user"></image>
	  		  <text class="logins_img_title">未登录</text>
	  </view>
	  <view class="logins_button">
		  <button v-if="users" class="logins_button_on" @click="login">立即登录</button>
		  <button v-else class="logins_button_off" @click="loginoff">退出登录</button>
	  </view>
  </view>
<!-- 搜索导航 -->
  <view class="search" @click="seach">
    <icon type="search" size="32rpx"></icon>
    <text class="search_title">搜索歌曲</text>
  </view>
<!-- 图片 -->
  <view style="margin:20rpx 0">
    <image style="width:100%;border-radius:8rpx;" mode="widthFix" src="http://p1.music.126.net/Lc9B_2sxyi4fBPRRqjFQXg==/109951165622666353.jpg?imageView&quality=89"></image>
  </view>
  <!-- 榜单列表 -->
  <view class="tcplists">
	  <view @click="tcpteds(item.id)" class="tcplists_list" v-for="(item,index) of tcplist" :key="index">
		  <view class="tcplists_list_viewimg">
			  <image mode="widthFix" class="tcplists_list_viewimg_img" :src="item.coverImgUrl"></image>
			  <text class="post">{{item.updateFrequency}}</text>
		  </view>
		  <view  class="tcplists_list_viewtext">
			  <text class="tcplists_list_viewtext_text" v-for="(item2,index2) of item.tracks" :key="index2">{{index2+1}}. {{item2.first}} - {{item2.second}}</text>
		  </view>
	  </view>
  </view>
</view>


</template>

<script>
	export default {
		data() {
			return {
				// 所有榜单
				tcplist:[],
				// 用户信息
				userinfo:{},
				users:true
			}
		},
		onLoad() {
			this.gettcplist()
		},
		methods: {
		  // 登录
		  login(){
			  // uni.login({
			  // 	success: (res) => {
			  // 		console.log(res)
					
			  // 	}
			  // })
			  // uni.getUserInfo({
			  // 	success: (res) => {
			  // 		console.log(res)
			  // 	}
			  // })
			  uni.request({
			  	url:"https://autumnfish.cn/login/cellphone",
				method:"POST",
				data:{
					phone:15893141235,
					password:"wyyyy15893141235"
				},
				success:res=>{
					this.users=false
					this.userinfo={
						userid:res.data.profile.userId,
						nickname:res.data.profile.nickname,
						avatarurl:res.data.profile.avatarUrl
					}
					console.log(res)
					uni.setStorage({
						key:"token",
						data:res.data.token
					})
				}
			  })
			 //  uni.login({
			 //  	provider:"wiexin",
				// success:res=>{
				// 	console.log(res)
				// }
			  // })
		  },
		  // 退出登录
		  loginoff(){
			  this.users=true
		  },
		 // 获取所有榜单
		  gettcplist(){
			uni.request({
			  url: 'https://autumnfish.cn/toplist/detail',
			  success:res=>{
				var data=res.data.list
				for(var i=0;i<4;i++){
				  this.tcplist.push(data[i])
				}
			  }
			})
		  },
		  // 搜索页面
		  seach(){
			  uni.navigateTo({
			  	url:"./search"
			  })
		  },
		  // 进入榜单页面
		  tcpteds(id){
			  uni.navigateTo({
			  	url:"../home/home?id="+id
			  })
		  }
		}
	}
</script>

<style>
.box{
  padding: 0 20rpx;
}
.logins{
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.logins_img{
	display: flex;
	align-items: center;
}
.logins_img_user{
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}
.logins_img_title{
	color: #ccc;
	margin-left: 20rpx;
	font-size: 28rpx;
}
.logins_button{
	display: flex;
	align-items:center;
}
button{
	border-radius: 30rpx;
	font-size: 24rpx;
	background: #fff;
	border: 2rpx solid #ccc;
}
.search{
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 20rpx;
  background: #eee;
  padding: 16rpx 20rpx;
  box-sizing: border-box;
  border-radius: 40rpx;
}
.search_title{
  font-size: 26rpx;
  color: #666;
  margin-left: 14rpx;
}
.tcplists_list{
	display: flex;
	margin-bottom: 34rpx;
}
.tcplists_list_viewimg{
	width: 200rpx;
	margin-right: 20rpx;
	position: relative;
}
.post{
	position: absolute;
	left:12rpx;
	bottom: 0;
	font-size: 20rpx;
	color: #fff;
}
.tcplists_list_viewimg_img{
	width: 100%;
	vertical-align: middle;
	border-radius: 10rpx;
}
.tcplists_list_viewtext{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	flex:1;
	/* white-space:nowrap; */
	Overflow:hidden;
	/* text-overflow:ellipsis; */
}
.tcplists_list_viewtext_text{
	font-size: 24rpx;
	color: #333;
	white-space:nowrap;
	Overflow:hidden;
	text-overflow:ellipsis;
}
</style>
